<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>608零食店</title>
    <style type="text/css">
        body{
            min-width: 600px;
            background: url("/store/image/loginBg.jpg");
        }
        h1{
            text-align: center;
            font-size: 50px;
            color: #1b80cc;
        }
        .switch{
            width: 250px;
            margin: 0 auto;
        }

        .switch a{
            display: inline-block;
            width:48% ;
            line-height: 40px;
            text-align: center;
            font-size: larger;
            color: #3085ff;
            text-decoration: none;
            font-weight: 500;
            font-family: 黑体;
        }
        .sign{
            width: 250px;

            margin:  0 auto;
        }
        .sign form{
            width: 100%;

        }
        form label{
            position: absolute;
            display: none;
            height: 35px;
            line-height: 35px;
            right: 0;
            top: 0;
            color: #ff0000;
        }
        .sign form div{
            position: relative;
            width: 100%;
            height: 35px;
        }
        form input{
            display: block;
            width: 100%;
            height: 35px;
            margin:  0 auto;

        }
        form input[type="submit"]{
            position: relative;
            background-color: #2228ff;
            border: none;
            border-radius: 10px;
            color: #ffffff;
            box-shadow: 5px 5px 4px #000000;
            font-size: large;
            top: 50px;
        }

    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input:submit").bind({
                mouseover:function(){
                    $(this).css("opacity","0.5");
                },
                mouseout:function(){
                    $(this).css("opacity","1");
                }
            })
            $(".sign div input").bind({
                focus:function(){
                    $(this).next().css("display","none")
                }
            })
            $(".sign div label").bind({
                click:function(){
                    $(this).css("display","none")
                }
            })
            document.sign.name.focus();

        })
        function verify(){
            var name=document.sign.name.value;
            var number=document.sign.number.value;
            var password=document.sign.password.value;
            var confirmPassword=document.sign.confirmPassword.value;
            var lableobj=$(".sign div label");
            if(name==""||number==""||password==""||confirmPassword==""){
                if(name==""){
                    lableobj.eq(0).css("display","block")

                }
                if(number==""){
                    lableobj.eq(1).css("display","block")

                }
                if(password==""){
                    lableobj.eq(2).css("display","block")

                }
                if(confirmPassword==""){
                    lableobj.eq(3).css("display","block")
                }
                return false
            }

            if(password!=confirmPassword){
                alert("两次输入的密码不一致！")
                return false
            }

        }
    </script>
</head>

<%
    String tip=(String) request.getAttribute("tip");
    if(null==tip){
        tip="";
    }
%>
<%
    String openId = (String)request.getAttribute("openId");
    String action = new String();
    if(!"".equals(openId)){
        action = "qq";

    }
%>
<%
    session.setAttribute("action",action);
    session.setAttribute("openId",openId);
%>


<body>
<div class="title">
    <h1>608零食店</h1>
</div>
<br>
<br>
<div class="switch">

    <a href="/store/jsp/register.jsp">注册</a>
    <a href="/store/jsp/login.jsp"  style="color: #000000">登录</a>

</div>

<div class="sign">
    <form name="sign" action="/store/register.do" method="POST">
        <font color='red'><%=tip%></font> <br>
        <div>
            <input name="name" type="text" size="20" maxlength="20" placeholder="用户名">
            <label>请输入用户名</label>
        </div>
        <div>
            <input name="number" type="text" size="20" maxlength="20"  placeholder="手机号">
            <label>请输入手机号</label>
        </div>
        <div>
            <input name="password" type="password" size="20" maxlength="20"  placeholder="密码">
            <label>请输入密码</label>
        </div>
        <div>
            <input name="confirmPassword" type="password" size="20" maxlength="20"  placeholder="确认密码">
            <label>请再次确认密码</label>
        </div>


        <input type="submit" value="注册" onclick="return verify()" onsubmit="return verify()">
    </form>
</div>

</body>
</html>